<script setup>
import { ref, watch } from 'vue';
import { RouterView, useRouter, useRoute } from 'vue-router'

const router = useRouter()
const active = ref('/')
const hideTabbar = ref(false)
const route = useRoute()

// 监听 active 变化并进行路由跳转
watch(active, (newValue) => {
  console.log('active', newValue);
  router.push(newValue)
})

// 监听当前路由是否隐藏底部导航栏
watch(() => route, (route) => {
  console.log('route', route);
  const isHide = route.meta.hideTabBar
  hideTabbar.value = isHide
}, {
  immediate: true,
  deep: true
})
</script>

<template>
  <div class="app-container">
    <div class="main-content">
      <RouterView />
    </div>
    <van-tabbar class="tab-bar" v-if="!hideTabbar" v-model="active" route>
      <van-tabbar-item name="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="/bag" icon="search">背包</van-tabbar-item>
      <van-tabbar-item name="/flowing" icon="friends-o">明细</van-tabbar-item>
      <van-tabbar-item name="/count" icon="setting-o">记账</van-tabbar-item>
      <van-tabbar-item name="/setting" icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tabbar {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-size: 0.24rem;
}

.tab-item.active {
  color: #1989fa;
}

.tab-icon {
  font-size: 0.44rem;
  margin-bottom: 2px;
}

.tab-bar {
  padding-bottom: 20px;
  padding-top: 10px;
}
</style>
